<template>
		<view class="gui-flex1">
				<!-- 主体区域 -->
				<!-- gui-bg-white -->
				<!-- <view class=" gui-dark-bg-level-3"
				style="padding-left: 32rpx; padding-bottom: 10rpx; padding-top: 60rpx;">
				<gui-switch-navigation :items="statuslist" @change="navchange" textAlign="center" :isCenter="true"
					activeDirection="center"></gui-switch-navigation>
			</view> -->
				<view style="height: 80rpx;"></view>
				
				<gui-switch-navigation style="margin-left: 40rpx;" :items="statuslist" @change="navchange"
					textAlign="center" :titleWordClass="nav_color" :isCenter="true" activeDirection="center"></gui-switch-navigation>
					
				<view style="height: 30rpx;"></view>

				<view class="gui-flex gui-rows gui-space-between beijing">
					<!-- 左侧分类列表 -->
					<!--  class="gui-cate-left" -->
					<!--  :style="{height:mainHeight+'px'}" -->
					<scroll-view :scroll-y="true" :show-scrollbar="false" :scroll-with-animation="true"
						:scroll-into-view="leftTo"
						style="width: 26%; min-height: 90vh; background-color: rgba(255, 255, 255, 0.3); padding-top: 10rpx;">
						<view class="gui-cate-left-item gui-border-box" v-for="(item, index) in cateList" :key="index"
							:class="[currentCateIndex == index ? 'gui-cate-left-current' : '']">
							<text class="gui-border-l"
								:class="['gui-cate-left-item-title','gui-block-text', currentCateIndex == index ? 'gui-cate-left-current1' : '']"
								:data-cateid="index" @tap="changCate">{{item.name}}</text>
						</view>
					</scroll-view>
					<!-- 右侧列表 -->
					<scroll-view :scroll-into-view="productListTo" :show-scrollbar="false" :scroll-with-animation="true"
						:scroll-y="true" class="gui-cate-right" style="height: 90vh;">
						<view class="gui-margin-top">
							<!-- 后面菜单是动态的 -->
							<!-- <view @click="menu_click(item)" v-for="(item,index) in menuList" :key="item.Id" class="" >
							<image  :src="item.pictureId"  class="tb_icon" borderRadius="0"></image>
							<view class="text-grey-74  mt-20 text-center" style="font-size: 26rpx;">{{item.activityName}}</view>
							<view class="text-grey-74  mt-20 text-center" style="font-size: 26rpx;">{{item.startTime}}至{{item.endTime}}</view>
						</view> -->
							<view v-for="(item,index) in menuList" :key="item.id" @click="nav_to(item)"
								class="pan gui-flex gui-column  gui-border-radius gui-bg-white">
								<view class=" gui-flex gui-row ">

									<image class="gui-border gui-border-radius"
										:src="item.picture_id ? $uimg + item.picture_id : '/static/imgs.png'"
										mode="scaleToFill"></image>
									<!-- {{$uimg+ item.picture_id}} -->
									<view class="info">
										<view class="title">
											{{item.activity_name}}
										</view>
										<view class="sj">
											{{$comm.toDate(item.start_time)}}至{{$comm.toDate(item.end_time)}}
										</view>
									</view>
								</view>
								<view class="pan_down">
									<text>
										{{get_status(item.isStart)}}
									</text>
									<text>
										{{item.views}}人浏览
									</text>
								</view>
							</view>
						</view>

					</scroll-view>
				</view>
		</view>
</template>

<!-- http://h5.apph5.lgwisdomunion.cn/#/integral/Myspecies?type=1&backUrl=%2Findex -->

<script>
	import graceJS from '@/Grace6/js/grace.js';
	import cateChangeData from '@/Grace6/demoData/cateChange.js';
	export default {
		data() {
			return {

				bg_img: uni.getStorageSync("bgimg"),
				// 全屏加载，当数据请求完毕时关闭
				pageLoading: false,
				// 核心区域高度
				mainHeight: 590,
				// 左侧分类定位
				leftTo: 'cate',
				// 标识切换时左侧点击触发的
				isLeftTap: false,
				// 左侧分类数据


				// 延迟执行防止卡顿
				scrollTimer: null,
				// 产品列表滚动定位
				productListTo: '',
				currentCateIndex: null,
				//menuList:[],  // 协同办公动态菜单
				cateList: [],
				menuList: [],
				statuslist: [{
					id: -1,
					name: '全部'
				}, {
					id: 1,
					name: '未开始'
				}, {
					id: 0,
					name: '进行中'
				}, {
					id: 2,
					name: '结束'
				}],
				status: -1,
				nav_color: ['gui-color-white'],
			}
		},
		created() {
			// console.log(this.mainCate);
			// graceJS.getRefs('guiPage', this, 0, (ref) => {
			// 	ref.getDomSize('guiPageBody', (e) => {
			// 		// 02. 导航的高度
			// 		// 可以 使用 graceJS.select() 函数动态获取， 也可以使用 uni.upx2px 转换已知高度
			// 		console.log(e);
			// 		let info = uni.getSystemInfoSync();
			// 		this.mainHeight = info.windowHeight - info.statusBarHeight;
			// 		setTimeout(() => {
			// 			this.pageLoading = false;
			// 		}, 1000)
			// 	});
			// });
			this.getList();
		},
		onLoad: function() {
			// 获取页面主体高度从而得出主体高度


		},

		onShow() {},
		methods: {
			navchange(d) {
				this.status = this.statuslist[d].id;
				this.get_activity();
			},
			menu_click(item) {
				this.$common.menu_nav(item);
			},
			get_status(d) {
				switch (d) {
					case 1:
						return "未开始";
					case 0:
						return "进行中";
					case 2:
						return "结束";
				}
			},
			changCate: function(e) {

				this.isLeftTap = true;
				var cateid = e.currentTarget.dataset.cateid;
				this.currentCateIndex = cateid;
				// this.mainCate=this.menuList[cateid].menuList;
				// setTimeout(()=>{this.isLeftTap = false;},3000)
				this.get_activity()

			},
			rscroll: function(e) {
				if (this.isLeftTap) {
					return;
				}
				if (this.scrollTimer != null) {
					clearTimeout(this.scrollTimer);
				}
				this.scrollTimer = setTimeout(() => {
					this.getIndex();
				}, 100);
			},
			// 获取动态菜单
			getList() {
				let self = this;
				this.$boya.NGet("/app/activity/query_type", {}, function(res) {
					// console.log(res.data);
					self.cateList = res.data;
					self.get_activity();
					// console.log('动态菜单：', self.cateList);
				})
			},
			get_activity() {
				let data = {
					page: 1,
					pageSize: 10,
					category_id: this.currentCateIndex ? this.cateList[this.currentCateIndex].id : null,
					isStart: this.status != -1 ? this.status : null
				}
				let self = this;
				this.$boya.NGet("/app/activity/query_list", data, function(res) {
					self.menuList = res.data;

					console.log('self.menuList: ', self.menuList);
				})
			},
			nav_to(d) {
				console.log(d);
				//this.$comm.nav_to("https://app.lgwisdomunion/#/online/stepInDetails?id="+d.id);
				uni.navigateTo({
					url: "/pages/home/Active/active?id=" + d.id
				})
			},
		}
	}
</script>

<style>
	.gui-flex1 {
		width: 100vw;
		min-height: 100vh;
		background: url('../../static/homePage/xinBj.png') 100% 100% / 100% 100%;
		/* background: linear-gradient(to right, #81B7F2, #56A3ED, #56A3ED, #61A7ED, #86BBF5, #86BBF5); */
	}

	.beijing {
		/* background-color: #8EC1F6; */
	}

	.header-search {
		padding: 20rpx 80rpx;
		width: 750rpx;
	}

	.gui-cate-left {
		width: 200rpx;
		background-color: #F6F7F8;
	}

	.gui-cate-right {
		width: 520rpx;
		overflow: hidden;
	}

	.gui-cate-left-item {
		height: 100rpx;
		padding: 35rpx 0;
		font-size: 26rpx;
	}

	.gui-cate-left-item-title {
		color: black;
		line-height: 32rpx;
		font-size: 30rpx;
		border-color: #F6F7F8;
		border-left-width: 8rpx;
		text-align: center;
	}

	.gui-cate-left-current {
		border-color: #4768AD !important;
		background-color: rgba(255, 255, 255, 0.9);
		color: #4768AD;
		font-weight: bold;
		border-radius: 15rpx;
	}

	.gui-cate-left-current1 {
		font-size: 30rpx;
		border-color: #4768AD !important;
		/* background-color: #FFFFFF; */
		color: #4768AD;
		font-weight: bold;
	}

	.gui-cate-right-title {
		line-height: 80rpx;
	}

	.gui-cate-product-list {
		margin-bottom: 30rpx;
		margin-right: 25rpx;
	}

	.gui-cate-pimg {
		width: 150rpx;
	}

	.gui-cate-pbody {
		margin-left: 30rpx;
		width: 100rpx;
		flex: 1;
		padding-top: -20rpx;
	}

	.gui-cate-price {
		font-size: 32rpx;
		line-height: 60rpx;
	}

	.pan {
		display: flex;

		margin: 20rpx 20rpx 20rpx 0rpx;
		box-shadow: 5rpx 5rpx 5rpx #ccc;
		border: solid 2rpx rgba(48, 99, 228, .2);
	}

	.pan image {
		width: 30%;
		height: 150rpx;
		margin: 20rpx;
		border-radius: 30rpx;
		border: solid 1rpx #FFFFFF;
	}

	.pan_down {
		height: 50rpx;

		padding: 10rpx 20rpx;
		background-color: rgba(48, 99, 228, .2);
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999;
	}

	.info {
		width: 70%;
		padding: 20rpx;
	}

	.title {
		text-overflow: ellipsis;
		font-size: 30rpx;
		;
		word-break: break-all;
		height: 75rpx;
		line-height: 40rpx;
		font-weight: bold;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-clamp: 2;
	}

	.sj {
		color: #999;
		font-size: 24rpx;
		margin-top: 20rpx;
	}
</style>